<template>
  <div class="search">
    <div class='heightt'>
      <!-- <div class="searchbox">
        <img style="width:15px;height:16px;" src="../../assets/img/sousuo.png" alt />
        <input type="text" placeholder="搜索您想要的药品" v-model="inputvalue" />
        <div style="width:35px;margin-left:10px;font-size:14px;" @click="getlists(1)">搜索</div>
      </div> -->
      <div class="searchbox">
        <div class="inputbox">
          <img style="width:15px;height:16px;margin:0 10px 0 18px" src="../../assets/img/sousuo.png" alt />
          <input type="text"  v-model="inputvalue" placeholder="搜索您想要的药品" />
        </div>
        <p class="sousuo"  @click="getlists(1)">搜索</p>
      </div>
      <div class="tab" v-show='list!="111"'>
        <div class="item" @click="selecrtab(1)">
          <div class="titlebox">
            <span>综合</span>
          </div>
          <div v-if="tabindex==1" class="dibian"></div>
        </div>
        <div class="item" @click="selecrtab(2)">
          <div class="titlebox">
            <span>销量</span>
            <img v-show="tabindex!=2"  class="px1" src="../../assets/img/shangxia.png" alt />
            <img  v-show="tabindex==2&&this.num==1" class="px1" src="../../assets/img/zhengxu.png" alt />
            <img v-show="tabindex==2&&this.num==2"  class="px1" src="../../assets/img/daoxu.png" alt />

          </div>
          <div v-if="tabindex==2" class="dibian"></div>
        </div>
        <div class="item" @click="selecrtab(3)">
          <div class="titlebox">
            <span>价格</span>
            <img v-show="tabindex!=3"  class="px1" src="../../assets/img/shangxia.png" alt />
            <img  v-show="tabindex==3&&this.num==1" class="px1" src="../../assets/img/zhengxu.png" alt />
            <img v-show="tabindex==3&&this.num==2"  class="px1" src="../../assets/img/daoxu.png" alt />
          </div>
          <div v-if="tabindex==3" class="dibian"></div>
        </div>
      </div>
    </div>

    <div class="like" v-show='list!="111"'>
      <ul v-show='list !== undefined || list.length !=0'>
         <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
              <!-- <van-cell
                v-for="(item,index) in list"
                :key="index"
                :title="item.title"
                  @click="todetails(item.goods_id)"
              /> -->
              <div style='height:43px;width:100%;'></div>
              <li v-for="(item,index) in list" :key="index" @click="godetails(item.goods_id)">
                <img :src="item.goods_thumb" />
                <p class="p1">{{item.goods_name}}</p>
                <!-- <p class="p2">清热解毒，清热解毒，清热解毒</p> -->
                <div class="qian">
                  <p class="p3">
                    <span>￥</span>{{item.shop_price}}
                  </p>
                  <p class="p4">提交需求</p>
                </div>
              </li>
            </van-list>
      </ul>
       <div v-show='list == undefined || list.length ==0' style="text-align:center;padding-top:50px;">
        暂无内容
      </div>
    </div>

    <div class="like" v-show='list=="111"'></div>

  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      
      list:'111',
      sort:'',
      num:'',
      tabindex: 1,
      inputvalue:'',


       loading: false,
        finished: false,
        page:1
    };
  },

  mounted(){
    
  },
  methods: {
     onLoad() {
            // console.log('aaaaaaaaa')

            setTimeout(() => {
                 this.page+=1
                this.getlists(this.page)
            }, 500);
           
      },
    // 销量   价格
    getlists(page){
      if(page==1){
        this.page=1
        this.list=''
        this.finished=false
      }
      this.$get("api/gzh_index.php?action=goods_list", {
        goods_name:this.inputvalue,
        sort:this.sort,
        order:this.num == 1?'ASC':'DESC',
        page:page,
        limit:20
      }).then(res => { 
         this.loading=false
                if(page==1){

                    if(res.data.length==0){
                        this.finished=true
                    }else{
                        this.list=res.data
                    }
                    if(res.data.length>0&&res.data.length<20){
                        this.finished=true
                    }
                   
                }else{
                    if(res.data.length==0){
                        this.finished=true
                    }else{
                        for (const key in res.data) {
                            this.list.push(res.data[key])
                        }
                    }
                    if(res.data.length>0&&res.data.length<20){
                        this.finished=true
                    }
                    
                }
      }).catch(err => {

      });
    },
    // 筛选不同
    selecrtab(index) {
      this.page=1
      this.finished=false

      if(index == 1){
        this.tabindex = index;
        this.sort = ''
        this.getlists(1)
      }else if(index == 2){
        this.tabindex = index;
        this.sort = 'goods_number'
        if(this.num == ''){
          this.num = 1
        }else if(this.num == 1){
          this.num = 2
        }else{
          this.num = 1
        }
        this.getlists(1)
      }else if(index == 3){
        this.tabindex = index;
        this.sort = 'shop_price'
        if(this.num == ''){
          this.num = 1
        }else if(this.num == 1){
          this.num = 2
        }else{
          this.num = 1
        }
        this.getlists(1)
      }
      
    },
    // 跳转详情
    godetails(id){


      var uid = localStorage.getItem('uid')
      if (!uid) {
          // console.log(window.location.href)
          // console.log(this.$route.name)
          this.$router.replace({ name: 'login', params: { 'beforeurl': this.$route.name } })
      } else {
          console.log('已经登录')
          this.$router.push({name:'details',query: {goods_id:id}}) 
      }

    },
  }
};
</script>

<style  scoped>
.heightt{
  height:187px;
}
.search {
  width: 100%;
  height:100%;
}
/* .searchbox {
  width: 100%;
  height: 98px;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
}
.searchbox img {
  position: absolute;
  left: 45px;
  bottom: 25px;
}
.searchbox input {
  font-size: 26px;
  border: none;
  background-color: #f7f7f7;
  border-radius: 30px;
  width: 690px;
  height: 60px;
  margin-top: 14px;
  padding: 0 50px;
  box-sizing: border-box;
} */

.searchbox {
  width: 100%;
  height: 100px;
  background: rgba(6, 162, 85, 1);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.searchbox .inputbox {
  width: 612px;
  height: 56px;
  background: rgba(255, 255, 255, 1);
  border-radius: 28px;
  display: flex;
  align-items: center;
}
.searchbox .inputbox input {
  font-size: 26px;
  border: none;
  width: 80%;
  /* height:34px; */
}
.sousuo{
  font-size: 30px;
  color: #fff;

}

/* 导航 */
.tab {
  width: 100%;
  height: 87px;
  background: rgba(255, 255, 255, 1);
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  display: flex;
}
.item {
  width: 33.33%;
  height: 100%;
  font-size: 30px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 87px;
  position: relative;
  text-align: center;
}
.titlebox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.titlebox .px1 {
  margin-right: 11px;
  width: 20px;
  height: 25px;
  margin-left: 5px;
}
.titlebox .px2 {
  margin-right: 11px;
  width: 20px;
  height: 10px;
  margin-left: 5px;
  margin-top: 10px;
}
.dibian {
  width: 36px;
  height: 4px;
  background: rgba(6, 162, 85, 1);
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 47%;
  transform: translateX(-47%);
}

input {
  background: none;
  outline: none;
  border: none;
}
input:focus {
  border: none;
}





/* 猜你喜欢 */
.like {
  width: 100%;
  height:calc(100% - 187px);
  overflow: hidden;
  
}
ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height:100%;
  overflow: hidden;
  overflow-y: scroll;
}
li {
  width: 50%;
  height: 500px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
li img {
  width: 337px;
  height: 337px;
}
li .p1 {
  font-size: 34px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
li .p2 {
  font-size: 28px;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}
li .qian {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
li .qian .p3 {
  font-size: 34px;
  color: #c94451;
}
li .qian .p3 span {
  font-size: 28px;
}
li .qian .p4 {
  width: 132px;
  height: 55px;
  background: #06a255;
  font-size: 28px;
  color: #fff;
  text-align: center;
  line-height: 55px;
  border-radius: 28px;
}
</style>


<style >

    .van-list{
        height:100%;
        width:100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

    }
    .van-list__finished-text{
      width:100%;
    }
    .van-loading--circular{
       width:100%;
    }
    .van-list__loading{
       width:100%;
    }
</style>